<template>
	<div class="box ce">

		<swiper :indicator-dots="true" :autoplay="true" class="swiper-box">
			<swiper-item v-for="(item,i) in starimglist " :key="i">
				<image :src="item.url" class="banner-img"></image>
			</swiper-item>
		</swiper>



		<view class="childone">

			<div v-if="mobile" class="userinfo">
				<view class="">
					<h2>欢迎你</h2>
					<!-- <image class="avatar" :src="avatar" @click="takephoto"></image> -->
					<view class="">{{mobile}} </view>
				</view>
			</div>

			<view v-else class="" style="margin:0 auto;width: 316rpx;">
				<van-button @click="showModal" type="primary"> 暂未登录，立即登录 </van-button>
			</view>
			
		</view>
		
		<view class="" style="font-size: 28rpx;text-align: center;">
			运势测算，答疑解惑，每日三卦，随心随缘，心诚则灵
		</view>
		
		


		<modal title="" cancelText='暂不登录' confirmText='立即登录' confirmColor='#f56c6c' v-if="!logindata.isLogin" @confirm="confirmLogin"
		 @cancel="cancelLogin">

			<view class="loginbox">
				<input v-model="logindata.mobile" @input="getMobile" placeholder="请输入手机号" type="text"></input>
			</view>
			<view class="loginbox">
				<input v-model="logindata.code" placeholder="请输入验证码" type="text"></input>
				<button @click="sendcode" :disabled="logindata.disabled">发送验证码</button>
			</view>
		</modal>




	</div>
</template>

<script>
	const mobileReg = /^1(3|5|6|7|8|9)\d{9}$/;
	const starimglist = [{
			url: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1841982914,2597667496&fm=26&gp=0.jpg',
			name: '白羊座'
		},
		{
			url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602748963713&di=3386ff5c591717aa84f68c482fb88842&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fcf63d4f21f0a6cbb70c7194b5d1fc0da8f6d43986985-cUmi6r_fw658',
			name: '金牛座'
		},
		{
			url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602749019100&di=7afddab688d01b69bc5621504555eeae&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20190224%2Fad99e7b24d094a57aff285e77e6c826e.jpeg',
			name: '双子座'
		},
		{
			url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602749066063&di=2096773a582cee34213f6f4c2f238c67&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180103%2F00cda4f57b8f418f80b2556c3a221806.jpeg',
			name: '巨蟹座'
		},
		{
			url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602749148885&di=6ca220721d81c4e0d115b8d87f4bf58e&imgtype=0&src=http%3A%2F%2Fs2.fafa01.com%2Fuploads%2F2d%2F8%2F566885%2F15213734613710.jpg',
			name: '狮子座'
		},
		{
			url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602749222129&di=1488f282dc86f4421fdf4c59f6751d86&imgtype=0&src=http%3A%2F%2Fp4.ssl.cdn.btime.com%2Ft016ded668f8ef2528f.jpg%3Fsize%3D521x284',
			name: '处女座'
		},
		{
			url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602749455513&di=c9a6f825d1d697725771c84448301f5d&imgtype=0&src=http%3A%2F%2Fwww.itfly.net%2Fuploads%2Fallimg%2F20170531%2F1496193274368_2.jpg',
			name: '天秤座'
		},
		{
			url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602749496824&di=1a85bed076fad4c91a27eae612582807&imgtype=0&src=http%3A%2F%2Fimgs.jieqinwang.com%2FPublic%2FUpload%2Fnews%2F2019-10-30%2F5db8f88293bc9.jpg',
			name: '天蝎座'
		},
		{
			url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602749623685&di=c9c6a6a8aecac0db6793509de3dca061&imgtype=0&src=http%3A%2F%2Fimg1.gtimg.com%2Fastro%2Fpics%2Fhv1%2F97%2F95%2F1546%2F100552972.jpg',
			name: '射手座'
		},
		{
			url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2305757354,262400457&fm=26&gp=0.jpg',
			name: '摩羯座'
		},
		{
			url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602749697606&di=a92f2000264b43596697e734c53a00ec&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F94o3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2Fb03533fa828ba61ef821aec14f34970a314e5914.jpg',
			name: '水瓶座'
		},
		{
			url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602749756038&di=e280113d1c737a0c23b33d6dd6e3cae9&imgtype=0&src=http%3A%2F%2Fimage.uczzd.cn%2F925827075177061539.jpg%3Fid%3D0',
			name: '双鱼座'
		},
	]
	export default {
		data() {
			return {
				logindata: {
					mobile: '13197159668',
					code: '',
					isLogin: true,
					disabled: true
				},
				mobile: '',
				starimglist,
			}
		},
		methods: {
			//调用官方接口打开弹出框
			showModal() {
				//
				this.logindata.isLogin = false;
			},


			//获取验证码，修改data里code数据
			getCode(e) {
				this.logindata.code = e.detail.value
			},

			//正则校验成功打开发送验证码按钮
			getMobile(e) {
				console.log(e.detail.value);

				//正则校验手机号是否输入正确
				

				this.logindata.mobile = e.detail.value;
				this.logindata.disabled = !mobileReg.test(e.detail.value);
			},

			//点击发送验证码
			sendcode() {
				wx.showLoading({
					title: '请求中...',
				})


				//发起请求
				wx.request({
					url: 'https://shiwenmz.top:3333/captcha/sent',
					data: {
						phone: this.logindata.mobile
					},
					method: "GET",
					success: res => {
						wx.hideLoading();
						console.log(res);
						if (res.data.code == 200) {
							wx.showToast({
								title: '验证码发送成功',
							})
						} else {
							wx.showToast({
								title: '请求失败',
							})
						}
					}
				})
			},

			//立即登录
			confirmLogin() {
				// console.log(111)
				console.log(this.logindata.code);

				wx.showLoading({
					title: '请求中...',
				})

				wx.request({
					url: 'https://shiwenmz.top:3333/captcha/verify',
					method: "GET",
					data: {
						phone: this.logindata.mobile,
						captcha: this.logindata.code
					},
					success: (res) => {
						console.log(res);
						if (res.data.code == 200) {
							wx.hideLoading({
								success: (res) => {},
							})

							wx.setStorageSync('isLogin', true)
							wx.setStorageSync("mobile", this.logindata.mobile);
							
							this.logindata.isLogin = true;
							this.mobile = wx.getStorageSync('mobile');
						} else {
							wx.showToast({
								title: '请求失败',
							})
						}

					}
				})
			},
			//点击暂不登录按钮，关闭弹窗
			cancelLogin() {

				this.logindata.isLogin = true;
			},

			//拍照
			takephoto() {

			}


		},
		mounted() {

		},
		onLoad() {
			// 如果storage里面有用户数据，就直接登录
			var mobile = wx.getStorageSync('mobile')
			// console.log(mobile);
			if (mobile) {
				this.logindata.isLogin = true;
				this.mobile = mobile
			}
		}
	}
</script>

<style>
	.loginbox {
		display: flex;
		width: 100%;
		height: 88rpx;
		box-sizing: border-box;
		border: 1rpx solid seagreen;
		border-radius: 10rpx;
		margin-top: 6rpx;
		padding: 0 14rpx;
		align-items: center;
	}

	.loginbox input {
		height: 88rpx;
		font-size: 42rpx;
	}

	.loginbox button {
		width: 300rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 32rpx;
		background-color: darkgray;
		box-sizing: border-box;
		padding: 0 10px;
	}

	.avatar {
		width: 150rpx;
		height: 150rpx;
		border: 2rpx solid darkred;
		border-radius: 50%;
	}



	.ce {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.swiper-box,
	.banner-img {
		width: 100%;
		height: 480rpx;
	}
	
	
	
	.childone{
		margin-top: 30rpx;
		
	}
	.userinfo{
		text-align: center;
		height: 200rpx;
		line-height: 70rpx;
	}
</style>
